「工欲善其事，必先利其器」是亙古不變的道理，而 emmet 也是前端開發者必學的項目，除此之外，編輯器上的熱鍵也少不了要研究一些。

這裡筆者分享一部自己操作 emmet 的影片，全程 3 分半，同時講解自己用到的 emmet 語法與熱鍵，以及一些上稿的小撇步。

emmet

1. 網頁環境：!
2. 插入 CSS：link:css
3. h1 標籤：h1
4. .pfofile：<div class="profile"></div>
5. 大括號可在 HTML 標籤內輸入文字：h2.title{中文標題}>span{英文標題}
6. 先輸入文字列表，最後再上 HTML 標籤，是用 Wrapping individual lines 技巧，相當適合拿來多行上稿使用

OS 與 VSCode 熱鍵(Win 與 Mac 中文表，以下則使用 Win 為範例)

• 在下方插入行：Cmd+Enter
• 選取整行：Cmd+L
• 選取多行：游標處 shift 按住後，使用上下鍵依序圈選
• 系統在兩個軟體間的切換：Cmd+Tab

教學補充

• emmet 影片檢疫教學

新手建議熱鍵教學

一開始不用學太多，先將左側欄學一些就很實用了，如下圖，像是基礎跟游標搜尋基本上都必學